1
00:00:00,870 --> 00:00:02,860
Hello and welcome to this lecture.

2
00:00:03,060 --> 00:00:11,610
In this lecture we are going to create the structure for our app using hate t email.

3
00:00:14,700 --> 00:00:20,580
Inside my His team male far from my text editor directory.

4
00:00:20,730 --> 00:00:30,330
So the very first line of code you need to specify in haste email the document is the dog the dog type

5
00:00:30,540 --> 00:00:39,540
is not part of the hastier mail document is just a declaration to notify the web browsers trying to

6
00:00:39,540 --> 00:00:45,880
display this page then this content of the page is an hastier mail document.

7
00:00:45,880 --> 00:00:49,700
That's what the declaration is.

8
00:00:50,490 --> 00:00:57,290
I have introduced a couple of asml tag line to three line 2.

9
00:00:57,330 --> 00:01:02,780
There is where the beginning of the hate email documents stance starts from.

10
00:01:02,940 --> 00:01:06,410
That's the opening tag line for is the clause in.

11
00:01:06,420 --> 00:01:14,220
You can tell detax match could you consider that a line under the hastier mail and that so to distinguish

12
00:01:14,220 --> 00:01:21,310
between the opening and closing the closing normally has the slash before the tag name right.

13
00:01:21,360 --> 00:01:26,700
If you have any attributes is usually included in the opening tack.

14
00:01:26,820 --> 00:01:32,880
Introduce an attribute in line to chord Ellie N G stands for language.

15
00:01:33,100 --> 00:01:38,270
And I've set the value to equals to English which is e n shocked.

16
00:01:38,280 --> 00:01:47,130
So with attributes you enclose the values in quotes attributes are there to provide extra information

17
00:01:47,550 --> 00:01:49,850
about the element.

18
00:01:49,950 --> 00:02:00,690
So every other email tag or element will write will be embedded or nested inside this hastier mail so

19
00:02:00,690 --> 00:02:08,900
any content between the opaline hit the mail unclosing this email is regarded as an hastier mail document.

20
00:02:10,410 --> 00:02:17,900
I have introduced the head tag on line 3 so that's the opening tag and that's the close in her tag on

21
00:02:17,910 --> 00:02:20,760
line it within the head tag.

22
00:02:20,760 --> 00:02:24,760
You have several other tacks the head tags.

23
00:02:24,780 --> 00:02:30,570
Basically you can't see it's content when the page is viewed.

24
00:02:30,570 --> 00:02:35,510
It's mainly there for informational purposes to the web browser.

25
00:02:35,670 --> 00:02:42,720
So inside the head tag I haven't got a title tag basically which displays the title of the web page

26
00:02:43,160 --> 00:02:44,790
of Wassaw online file.

27
00:02:44,800 --> 00:02:56,500
Quite a reference to my style site and I've got a main style sheet and I've also got a link to online

28
00:02:56,580 --> 00:02:59,290
7 to Google.

29
00:02:59,630 --> 00:03:00,960
Okay so google this.

30
00:03:00,950 --> 00:03:07,360
This link here has some special fonts which I want to use for the project.

31
00:03:07,500 --> 00:03:10,800
So this is a link to that font.

32
00:03:10,890 --> 00:03:16,050
I want to use lines 7 is a script for.

33
00:03:16,080 --> 00:03:19,170
Query will be used in some query code.

34
00:03:19,170 --> 00:03:27,210
Jake Query is a javascript library so you will be using some of that code in our javascript so in order

35
00:03:27,210 --> 00:03:34,500
to have reference to the query library you need to include it in the head section.

36
00:03:34,500 --> 00:03:39,030
That's what I've done on my 7 so this is a reference to the query library.

37
00:03:39,030 --> 00:03:49,000
It saves me installing the library on my computer I can just access it via that link here.

38
00:03:49,530 --> 00:03:58,890
I have introduced a couple tags named line while those are met are tags and they got attributes to him

39
00:03:59,370 --> 00:04:04,850
the line for metal cast said the card said physically refers to the encoding type.

40
00:04:04,850 --> 00:04:09,420
That is the type of characters that will be used.

41
00:04:09,420 --> 00:04:18,270
That this page supports So the standard for all web browser is utf dash it or the current owner or using

42
00:04:18,270 --> 00:04:25,710
utf that it should be able to read most characters like five metal metal tag.

43
00:04:25,720 --> 00:04:33,390
Have quite a attribute code name and in fairly few viewport or have also got another work within that

44
00:04:33,720 --> 00:04:40,400
line of code quote content and values which equals to a device with a comma.

45
00:04:40,680 --> 00:04:43,530
And those are the initial dash scale equations.

46
00:04:43,630 --> 00:04:50,850
One points here are what that means basically is that the on line 5 is that this page can be viewed

47
00:04:51,300 --> 00:04:57,350
by any device regardless of the screen size so you can view with a small screen on my screen.

48
00:04:57,360 --> 00:05:01,400
It will automatically resize that initial skill.

49
00:05:01,470 --> 00:05:10,370
Skill means that you can zoom the initial scale to zoom so that allows you to zoom in and zoom out and

50
00:05:10,410 --> 00:05:11,900
that's what that's for.

51
00:05:13,060 --> 00:05:22,940
I have introduced the body tag their body tag is where the main content of the web page will be displayed.

52
00:05:23,320 --> 00:05:32,690
Okay so anything in the body tag is the content that people actually see when they view the web page.

53
00:05:32,900 --> 00:05:43,220
So inside the body tag are have some other tags nested and got an input tag and a type is text.

54
00:05:43,220 --> 00:05:47,460
So that's where people were actually actually after taps on.

55
00:05:47,750 --> 00:05:52,460
Okay and was given in a place called old name.

56
00:05:52,460 --> 00:05:54,170
I've also got and.

57
00:05:54,350 --> 00:06:00,230
The importance of giving them I.D. attributes which we will use later to

58
00:06:02,720 --> 00:06:04,190
use later.

59
00:06:04,790 --> 00:06:05,260
All right.

60
00:06:05,260 --> 00:06:08,010
Apologies I've had to change the code.

61
00:06:08,030 --> 00:06:13,500
It actually inserted the wrong could which was input tap we don't really need input tags.

62
00:06:13,500 --> 00:06:20,720
Here is we doing equates false apologies for let's all have to replace that code.

63
00:06:20,750 --> 00:06:22,290
Basically the body tag here.

64
00:06:22,290 --> 00:06:25,090
What this does it oaklyn body.

65
00:06:25,100 --> 00:06:28,920
And this is the same body tag.

66
00:06:29,980 --> 00:06:32,310
Okay you've seen that bit.

67
00:06:34,880 --> 00:06:35,740
OK.

68
00:06:36,150 --> 00:06:38,490
So I've cut it deep here.

69
00:06:38,500 --> 00:06:39,470
Like 15.

70
00:06:39,480 --> 00:06:43,320
This would be the main container is called quave container.

71
00:06:43,320 --> 00:06:46,050
So this will wrap or the other deaves.

72
00:06:46,260 --> 00:06:56,020
And you notice that the pig is there an ENT here which means it's a wrapper for the or the contents.

73
00:06:56,040 --> 00:06:56,750
All right.

74
00:06:56,940 --> 00:07:07,240
So I've got one tank look which is ahead in tag that's just a title on line 16 on line 18 to let me

75
00:07:07,290 --> 00:07:09,720
just bring this up a bit.

76
00:07:09,730 --> 00:07:14,690
So from line 17 to 20.

77
00:07:15,110 --> 00:07:16,030
Three.

78
00:07:16,110 --> 00:07:19,170
So we've got several diff tags here.

79
00:07:19,220 --> 00:07:29,450
The tab called Class notice of giving them attributes of class will be used in the class names for stylin

80
00:07:29,460 --> 00:07:30,720
purposes.

81
00:07:30,810 --> 00:07:39,300
So giving all of them a class attribute with the values here specified.

82
00:07:39,750 --> 00:07:44,830
So line 17 was a class day with the name question.

83
00:07:44,860 --> 00:07:48,380
We've got a U L which is the on ordered list.

84
00:07:48,390 --> 00:07:55,670
This is where it will have to make a selection of the choices for the quiz.

85
00:07:55,770 --> 00:07:58,830
Selection will now lie in 19.

86
00:07:58,950 --> 00:08:03,990
D d will be a shell that will be the message for bequeaths line.

87
00:08:04,090 --> 00:08:06,710
20 is the result.

88
00:08:06,960 --> 00:08:09,390
You know that will pop up after the quiz.

89
00:08:09,390 --> 00:08:11,200
You know your answers.

90
00:08:11,410 --> 00:08:15,690
Line 1 is the next part in so you click next to should.

91
00:08:15,690 --> 00:08:23,970
Next question saw this Classes will we use late in our Seer says tall stout these beef's okay to make

92
00:08:23,970 --> 00:08:29,790
them more pronounce and then I've got it break tag here just to create some space underneath this button

93
00:08:30,510 --> 00:08:33,270
and then finally will get his script back.

94
00:08:33,330 --> 00:08:40,940
It's always good to attach your script tag at the very end of your hastier middle document.

95
00:08:40,940 --> 00:08:46,250
This group carafes refroze to our Jav us group here which will write later.

96
00:08:46,260 --> 00:08:53,160
The reason for inserting this script at the bottom and not in the head is that you hope this group will

97
00:08:53,160 --> 00:08:56,970
only execute after all the rest of the page has been loaded.

98
00:08:57,030 --> 00:09:03,240
If you insert it in the head it will not work because you may prevent P from load so it's always best

99
00:09:03,240 --> 00:09:09,720
to insert your script at the bottom of the page just before the closing.

100
00:09:09,830 --> 00:09:11,840
But it had to write that way.

101
00:09:11,850 --> 00:09:17,030
Every page will load completely before the script is executed.

102
00:09:17,160 --> 00:09:21,980
So I'll save this and then we can have a look and see what the document looks like.

103
00:09:22,360 --> 00:09:24,240
All right so I mean a directory.

104
00:09:24,330 --> 00:09:29,650
Just click to open and we can see.

105
00:09:31,390 --> 00:09:35,100
Okay so this is what they paid.

106
00:09:35,110 --> 00:09:42,360
Looks like at the moment it doesn't look much but when we start writing our javascript code we gonna

107
00:09:42,370 --> 00:09:48,380
use dad to make this big a bit more interactive so that's saved for this lecture.

108
00:09:48,460 --> 00:09:49,660
Thanks for watching.

109
00:09:49,660 --> 00:09:50,840
Bye for now.